/**
 * Licensed to Jasig under one or more contributor license
 * agreements. See the NOTICE file distributed with this work
 * for additional information regarding copyright ownership.
 * Jasig licenses this file to you under the Apache License,
 * Version 2.0 (the "License"); you may not use this file
 * except in compliance with the License. You may obtain a
 * copy of the License at:
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on
 * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied. See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

/*
Generic containers for columns and layouts
=============================================
 */

/* Container Utilities*/
.fl-fix {overflow: auto; zoom:1;}
.fl-push {clear:both;}

/* Container alignment */
.fl-force-right {float:right; display:inline;} /* IE 6 needs inline display to prevent double margin bug (other browsers ignore it) */
.fl-force-left {float:left; display:inline;} /* IE 6 needs inline display to prevent double margin bug (other browsers ignore it) */
.fl-centered {margin-left:auto; margin-right:auto;}

/* Generic container, proxy for other container effects */
.fl-container {}

/* Fixed width containers */
.fl-container-50 {width: 50px;} 
.fl-container-100 {width: 100px;} 
.fl-container-150 {width: 150px;} 
.fl-container-200 {width: 200px;} 
.fl-container-250 {width: 250px;} 
.fl-container-300 {width: 300px;} 
.fl-container-350 {width: 350px;} 
.fl-container-400 {width: 400px;} 
.fl-container-450 {width: 450px;} 
.fl-container-500 {width: 500px;} 
.fl-container-550 {width: 550px;} 
.fl-container-600 {width: 600px;} 
.fl-container-650 {width: 650px;} 
.fl-container-700 {width: 700px;} 
.fl-container-750 {width: 750px;} 
.fl-container-800 {width: 800px;} 
.fl-container-850 {width: 850px;} 
.fl-container-900 {width: 900px;} 
.fl-container-950 {width: 950px;} 
.fl-container-1000 {width: 1000px;} 

/* Flex width containers */
.fl-container-auto {width: auto;}
.fl-container-flex {width: 100%; clear:both;}
.fl-container-flex10 {width: 10%;}
.fl-container-flex20 {width: 20%;}
.fl-container-flex25 {width: 25%;}
.fl-container-flex30 {width: 30%;}
.fl-container-flex33 {width: 33%;}
.fl-container-flex40 {width: 40%;}
.fl-container-flex50 {width: 50%;}
.fl-container-flex60 {width: 60%;}
.fl-container-flex66 {width: 66%;}
.fl-container-flex75 {width: 75%;}

/* linearizable containers & columns */
.fl-layout-linear *,
.fl-layout-linear .fl-linearEnabled {
    overflow:visible !important; 
    clear: both !important; 
    float:none !important;
    position:relative !important; 
    margin-left:0 !important;  
    margin-right:0 !important;
    top:0 !important; 
    left:0 !important;
}
.fl-layout-linear .fl-container,
.fl-layout-linear .fl-container-100,
.fl-layout-linear .fl-container-150,
.fl-layout-linear .fl-container-200,
.fl-layout-linear .fl-container-250,
.fl-layout-linear .fl-container-300,
.fl-layout-linear .fl-container-400,
.fl-layout-linear .fl-container-750,
.fl-layout-linear .fl-container-950,
.fl-layout-linear .fl-container-auto, 
.fl-layout-linear .fl-container-flex25, 
.fl-layout-linear .fl-container-flex30, 
.fl-layout-linear .fl-container-flex33, 
.fl-layout-linear .fl-container-flex50,
.fl-layout-linear .fl-col,
.fl-layout-linear .fl-col-side,
.fl-layout-linear .fl-col-flex,
.fl-layout-linear .fl-col-main,
.fl-layout-linear .fl-col-fixed,
.fl-layout-linear .fl-col-justified {width:100% !important; margin:auto; padding:0 !important;}

.fl-layout-linear .fl-force-left, 
.fl-layout-linear .fl-force-right,
.fl-layout-linear li {display:block !important; float:none !important;}

.fl-layout-linear .fl-linearEnabled {width:100% !important; position:relative;} /* linearization opt in for special cases */

/*
Layout Helpers
=============================================
*/
/* Columns: A quick column grid system */
/* Flex width columns (containers with margins and padding) */
.fl-col-justified {float:left; display:inline; overflow:auto; text-align:justify;} /* redundant: text alignment now in fluid.text.css */

.fl-col-flex2, .fl-col-flex3, .fl-col-flex4, .fl-col-flex5 {overflow:auto; zoom:1;}
.fl-col,
.fl-col-flex10,
.fl-col-flex20,
.fl-col-flex25,
.fl-col-flex30,
.fl-col-flex33,
.fl-col-flex34,
.fl-col-flex40,
.fl-col-flex50,
.fl-col-flex60,
.fl-col-flex66,
.fl-col-flex75,
.fl-col-flex80,
.fl-col-flex90 {float:left; display:inline;}
.fl-col-flex5 .fl-col {width:18.95%; margin-left:0.25%;margin-right:0.25%; padding-left:0.25%; padding-right:0.25%}
.fl-col-flex4 .fl-col {width:24%; margin-left:0.25%;margin-right:0.25%; padding-left:0.25%; padding-right:0.25%}
.fl-col-flex3 .fl-col {width:32.33%; margin-left:0.25%;margin-right:0.25%; padding-left:0.25%; padding-right:0.25%}
.fl-col-flex2 .fl-col {width:48.85%; margin-left:0.25%;margin-right:0.25%; padding-left:0.25%; padding-right:0.25%}
.fl-col-flex10 {width: 10%;}
.fl-col-flex20 {width: 20%;}
.fl-col-flex25 {width: 25%;}
.fl-col-flex30 {width: 30%;}
.fl-col-flex33,
.fl-col-flex34 {width: 33%;}
.fl-col-flex40 {width: 40%;}
.fl-col-flex50 {width: 50%;}
.fl-col-flex60 {width: 60%;}
.fl-col-flex66 {width: 66%;}
.fl-col-flex75 {width: 75%;}
.fl-col-flex80 {width: 80%;}
.fl-col-flex90 {width: 90%;}

/* CHANGE TO LAYOUT not COL since this will become a layout helper */
.fl-col-mixed,
.fl-col-mixed2,
.fl-col-mixed3 {overflow:auto; zoom:1;}

/* Old System */
.fl-col-mixed .fl-col-side {width:200px;}
.fl-col-mixed .fl-col-side, 
.fl-col-mixed .fl-col-main {padding:0 10px;}

.fl-col-mixed2 .fl-col-side {width:200px; padding:0 10px; float:left;}
.fl-col-mixed2 .fl-col-main {margin-left:220px; padding:0 10px;} /* margin goes on whichever side the fixed column goes */

.fl-col-mixed3 .fl-col-main {margin:0 220px;} /* margin goes on whichever side the fixed column goes */

/* New System, requires fl-force-XX, provides some basic numbers to start with */
.fl-col-fixed, .fl-col-flex {padding:0 10px;}

.fl-col-mixed .fl-col-fixed {width:200px; padding:0 10px;}
.fl-col-mixed .fl-col-flex-left {margin-left:220px; padding:0 10px;}
.fl-col-mixed .fl-col-flex-right {margin-right:220px; padding:0 10px;}

.fl-col-mixed-100 .fl-col-fixed {width:100px;}
.fl-col-mixed-100 .fl-col-flex-left {margin-left:120px;}
.fl-col-mixed-100 .fl-col-flex-right {margin-right:120px;}

.fl-col-mixed-150 .fl-col-fixed {width:150px;}
.fl-col-mixed-150 .fl-col-flex-left {margin-left:170px;}
.fl-col-mixed-150 .fl-col-flex-right {margin-right:170px;}

.fl-col-mixed-200 .fl-col-fixed {width:200px;}
.fl-col-mixed-200 .fl-col-flex-left {margin-left:220px;}
.fl-col-mixed-200 .fl-col-flex-right {margin-right:220px;}

.fl-col-mixed-250 .fl-col-fixed {width:250px;}
.fl-col-mixed-250 .fl-col-flex-left {margin-left:270px;}
.fl-col-mixed-250 .fl-col-flex-right {margin-right:270px;}

.fl-col-mixed-300 .fl-col-fixed {width:300px;}
.fl-col-mixed-300 .fl-col-flex-left {margin-left:320px;}
.fl-col-mixed-300 .fl-col-flex-right {margin-right:320px;}



/*
 * Tabs: a quick tab system
 * Dependency: list-based markup ?
 */
.fl-tabs {margin:0.75em 0 0 0; border-bottom:1px solid #000; text-align:center; padding-bottom:0.2em;}
.fl-tabs li {list-style-type:none; display:inline;}
.fl-tabs li a {padding:0.25em 1.25em; background-color:#fff; margin-left:-5px; *margin-bottom:-8px; zoom:1; border:1px solid #000; border-bottom:1px solid #fff;}
.fl-tabs li a:hover {}
.fl-tabs .orderable-drop-marker {padding:0 3px; background-color:#c00;margin:0 5px 0 -5px; zoom:1;}

.fl-tabs .fl-activeTab {}

.fl-tabs-center {text-align:center;}
.fl-tabs-left {text-align:left; padding-left:10px;}
.fl-tabs-right {text-align:right; padding-right:15px;}


/*
 * Menus: quick horizontal and vertical menu
 * Requires list items with anchors
 */
.fl-listmenu {padding:0px; border-bottom-width:1px; border-bottom-style:solid;}
.fl-listmenu li {margin:0; padding:0; list-style-type:none; border-width:1px; border-style:solid; border-bottom:none;}
.fl-listmenu a {padding:5px 5px; display:block; zoom:1;} /* list item needs layout (http://www.brunildo.org/test/IEWlispace.php) */
.fl-vert-menu {
}
.fl-horz-menu {
}

/*
 * Picture Grid: a quick picture grid layout
 * Dependency: list-based markup
 */
ul.fl-grid, .fl-grid ul {padding:0; margin:0;}
.fl-grid li {list-style-type:none; display:inline;}
.fl-grid li {float:left; width:19%; margin:0.5%; height:150px; overflow:hidden; position:relative; display:inline;}
.fl-grid li img {display:block; margin:5px auto;}
.fl-grid li .caption {position:absolute; left:0px; bottom:0px; width:100%; text-align:center; height:1em; padding:3px 0;}

/*
 * Icons: quick accessible icon helper
 */
.fl-icon {
    text-indent:-5000px; 
    overflow:hidden; 
    cursor:pointer; 
    display:block; 
    height:16px; 
    width:16px; 
    margin-left:5px; 
    margin-right:5px;
    background-position:center center; 
    background-repeat:no-repeat;
}
input.fl-icon {padding-left:16px;}

/*
 * Buttons: quick sliding door buttons
 * requires a container with a sub container
 */

.fl-button-left {float:left; margin-right:10px; padding:0 0 0 16px; background-position:left center; background-repeat:no-repeat;}
.fl-button-left * {float:left; padding:0 16px 0 0; cursor:pointer; background-position:left center; background-repeat:no-repeat;}
.fl-button-right {float:right;  margin-left:10px; padding:0 0 0 16px; background-position:left center; background-repeat:no-repeat;}
.fl-button-right * {float:left; padding: 0 16px 0 0; cursor:pointer; background-position:left center; background-repeat:no-repeat;}

/*
 * Widgets: modelled after the mycamtools widget model
 */
.fl-widget {padding:5px; margin-bottom:10px;}
.fl-widget .button {margin:0 5px;}
.fl-widget .fl-widget-titlebar {} /* fixes layout problem in IE6 due to .column {position:relative} setup*/
.fl-widget .fl-widget-titlebar h2 {padding:0; margin:0; font-size:105%;}
.fl-widget .fl-widget-controls {margin:-1.3em 0 1.5em 0;}
.fl-widget .fl-widget-options {margin-top:5px; padding:0px 10px;}
.fl-widget .fl-widget-options ul {margin:0; padding:0; overflow:hidden; zoom:1;} 
.fl-widget .fl-widget-options li {list-style-type:none; float:left; display:inline; padding:0 5px 0 5px; margin-left:-5px;}
.fl-widget .fl-widget-options a {margin-right:5px;}
.fl-widget .fl-widget-content {zoom:1; margin:5px 0 0 0; overflow: auto;}
.fl-widget .fl-widget-content ul {}
.fl-widget .empty * {padding-top:10px; margin-left:auto; margin-right:auto; text-align:center;}

/* Common widget sub-components */
.fl-widget .menu 	{margin:0;}
.fl-widget .grabbable {cursor:move; background-position:center top; background-repeat:no-repeat;}
.fl-widget h2.grabbable {background-position:center top;}
/*.fl-widget .icon 	{text-indent:-5000px; cursor:pointer; display:block; height:16px; width:16px; margin-left:5px; margin-right:5px; background-repeat:no-repeat;}*/
.fl-widget .toggle  {width:32px;}
.fl-widget .on 		{background-position:left top;}
.fl-widget .off 	{background-position:left bottom;}


/*
 * Forms and Form Controls
 * Common arrangements for form inputs
 */
/* Alignment requires list of label elements placed before the control */
.fl-controls-left li {list-style-type:none; text-align:left;}
.fl-controls-left .fl-label {float:left; text-align:left; width:50%; margin-right:5px;}

.fl-controls-right li {list-style-type:none; display:block; text-align:left;}
.fl-controls-right .fl-label {float:left; text-align:right; width:50%; margin-right:5px;}

.fl-controls-centered li {list-style-type:none; display:block; text-align:left;}
.fl-controls-centered .fl-label {float:left; text-align:center; width:50%; margin-right:5px;}


/*
 * Progressive Enhancement
 */
.fl-progressive-enhancer {display:none;}

/**
 * Knockout Background Images
 */
.fl-no-background-images, .fl-noBackgroundImages * {
    background-image:none !important;
}


/*
Component Specific
=============================================
*/


/* INLINE EDIT */
.fl-component-inlineEdit span input {margin:-2px; padding:0;} /* auto generated input fields */



/* PROGRESSOR */
.fl-progress-bounds {border-width:1px; border-style:solid; padding:2px;}
.fl-progress-fill {width:100%;}
